<template>
    <div style="padding-bottom:80px;">
        <div v-title>我要报价</div>
        <div class="tenter">
            <div class="title">
                <span class="leftbor"></span>{{InsuranceName}}</div>
            <van-cell-group>
                <van-cell title="车主姓名">
                    <input placeholder="请输入车主姓名" v-model="TrueName" type="text" />
                </van-cell>
                <van-cell title="身份证号">
                    <input placeholder="请输入车主身份证号" v-model="IDNumber" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" />
                </van-cell>
                <van-cell title="号牌号码">
                    <input placeholder="请输入号牌号码" v-model="PlateNumber" type="text" />
                </van-cell>
                <van-cell title="品牌型号">
                    <input placeholder="请输入品牌型号" v-model="CarBrand" type="text" />
                </van-cell>
                <van-cell title="车辆识别代号">
                    <input placeholder="请输入车辆识别代号" v-model="VIN" type="text" />
                </van-cell>
                <van-cell title="发动机号码">
                    <input placeholder="请输入发动机号码" v-model="EngineNumber" type="text" />
                </van-cell>
                <van-cell title="注册日期" @click="showdate=true">
                    <input placeholder="请输入注册日期" v-model="RegistrationTime" type="text" readonly />
                </van-cell>
                <div class="choosetitle">选择险种</div>
                <div class="choose">
                    <div class="chleft">
                        <span>交强险</span>
                    </div>
                    <div class="chright">
                        <div class="blocker" style="width:120px" :class="{active:isTurer == 0}" @click="isTurer ==0?isTurer = 1:isTurer =0;isShow()">
                            <span class="triangle" v-show="isShower"></span>
                            <span>交强险+车船使用税（不参与分期）</span>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <div class="chleft">
                        <span>（必选）</span>
                    </div>
                    <div class="chright">
                        <div class="blocker active" v-for="item,index in TrueList" :key="index">
                            <span class="triangle"></span>
                            <span>{{item.InsuranceName}}</span>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <div class="chleft">
                        <span>（多选）</span>
                    </div>
                    <div class="chright">
                        <div class="blocker" :class="{active:item.isTure == 0}" @click="item.isTure == 0?item.isTure = 1:item.isTure = 0;CheckTrue(index)" v-for="item,index in CheckList" :key="index">
                            <span class="triangle" v-show="item.triangle"></span>
                            <span>{{item.InsuranceName}}</span>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <div class="chleft">
                        <span>（单选）</span>
                    </div>
                    <div class="chright" style="border:none">
                        <div class="blocker" :class="{active:item.triangle}" @click="RadioTrue(index)" v-for="item,index in RadioList" :key="index">
                            <span class="triangle" v-show="item.triangle"></span>
                            <span>{{item.InsuranceName}}</span>
                        </div>
                    </div>
                </div>

            </van-cell-group>
            <div class="photo">
                <p>车主行驶证正副本照片
                    <span>（上传照片要求字迹清晰可辨识）</span>
                </p>
                <div style="overflow: hidden;position: relative;">
                    <Up @imgbase="Uthree" style="width:48%;float:left;text-align: center;">
                    </Up>
                    <span class="goods" v-show="Img3==''">行驶证正本照片</span>
                    <Up @imgbase="Ufour" style="width:48%;float:right;text-align: center;">
                    </Up>
                    <span class="goods" style="left:52%" v-show="Img4==''">行驶证副本照片</span>
                </div>
                <p>车主行驶证副本背面照
                    <span>（上传照片要求字迹清晰可辨识）</span>
                </p>
                <div style="overflow: hidden;position: relative;">
                    <Up @imgbase="Ufive" style="width:48%;float:left;text-align: center;">
                    </Up>
                    <span class="goods" v-show="Img5==''">行驶证副本背面照片</span>
                    <div style="width:48%;float:right;text-align: center;"><img src="../image/shiyi.png"></div>
                </div>
            </div>
        </div>
        <div class="bottom" @click="AddQuote">获取报价</div>
        <van-popup position="bottom" v-model="showdate">
            <van-datetime-picker v-model="currentDate" type="date" @confirm="confirm" @cancel="cancel":min-date="minDate" />
        </van-popup>
    </div>
</template>
<style src="../css/iconfont.css"></style>
<script>
import api from '../fetch/api.js';
import { Cell, CellGroup, Toast, DatetimePicker, Popup } from 'vant';
import upload from '../components/loadImgs.vue'
export default {
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Toast.name]: Toast,
        [DatetimePicker.name]: DatetimePicker,
        [Popup.name]: Popup,
        'Up': upload,
    },
    data() {
        return {
            RadioList: [],
            CheckList: [],
            TrueList: [],
            isTwo: -1,
            TrueName: '',
            IDNumber: '',
            PlateNumber: '',
            CarBrand: '',
            VIN: '',
            EngineNumber: '',
            RegistrationTime: '',
            PolicyName: [],
            PolicyRemark: [],
            PolicyTrue: [],
            currentDate: new Date(),
            showdate: false,
            InsuranceName: this.$route.params.InsuranceName,
            isTurer: 1,
            isShower: false,
            UpImg3: '',
            UpImg4: '',
            UpImg5: '',
            Img3: '',
            Img4: '',
            Img5: '',
            minDate:new Date(1999, 12, 1),
        }
    },
    created() {
        this.GetSafeList()
    },
    methods: {
        //获取保险类别
        GetSafeList() {
            api.GetSafeList({ IsDuty: -1 }).then(res => {
                for (let i = 0; i < res.length; i++) {
                    if (res[i].IsDuty == 0) {
                        //单选
                        this.RadioList.push({
                            InsuranceName: res[i].InsuranceName,
                            Remark: res[i].Remark,
                            IsDuty: res[i].IsDuty,
                            IsTrue: res[i].IsTrue,
                            triangle: false
                        })
                    } else if (res[i].IsDuty == 1) {
                        //多选
                        this.CheckList.push({
                            InsuranceName: res[i].InsuranceName,
                            Remark: res[i].Remark,
                            IsDuty: res[i].IsDuty,
                            IsTrue: res[i].IsTrue,
                            isTure: 1,
                            triangle: false
                        })
                    } else {
                        //必选
                        this.TrueList.push({
                            InsuranceName: res[i].InsuranceName,
                            Remark: res[i].Remark,
                            IsDuty: res[i].IsDuty,
                            IsTrue: res[i].IsTrue
                        })
                    }
                }
            })
        },
        //图片上传
        Uthree(s) {
            this.UpImg3 = s
            this.Img3 = s
        },
        Ufour(s) {
            this.UpImg4 = s
            this.Img4 = s
        },
        Ufive(s) {
            this.UpImg5 = s
            this.Img5 = s
        },
        //多选三角
        CheckTrue(index) {
            if (this.CheckList[index].triangle == true) {
                this.CheckList[index].triangle = false
            } else {
                this.CheckList[index].triangle = true
            }
        },
        //单选三角
        RadioTrue(index) {
            if (this.isTwo == index) {
                this.RadioList[index].triangle = false;
                this.isTwo = -1
                return;
            }
            this.RadioList[index].triangle = true;
            if (this.isTwo != -1)
                this.RadioList[this.isTwo].triangle = false;
            this.isTwo = index;
        },
        //交强三角
        isShow() {
            if (this.isTurer == 0) {
                this.isShower = true
            } else {
                this.isShower = false
            }
        },
        confirm(p) {
            let myDate = p;
            this.RegistrationTime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate()
            this.showdate = false
        },
        cancel() {
            this.showdate = false;
        },
        //获取报价
        AddQuote() {
            if (this.TrueName == '') {
                Toast('请输入车主姓名');
                return
            }
            if (this.IDNumber == '') {
                Toast('请输入车主身份证号');
                return
            }
            if (this.PlateNumber == '') {
                Toast('请输入号牌号码');
                return
            }
            if (this.CarBrand == '') {
                Toast('请输入品牌型号');
                return
            }
            if (this.VIN == '') {
                Toast('请输入车辆识别代号');
                return
            }
            if (this.EngineNumber == '') {
                Toast('请输入发动机号码');
                return
            }
            if (this.RegistrationTime == '') {
                Toast('请输入注册日期');
                return
            }
            this.PolicyName = [];
            this.PolicyRemark = [];
            this.PolicyTrue = [];
            for (let i = 0; i < this.TrueList.length; i++) {
                this.PolicyName.push(this.TrueList[i].InsuranceName)
                this.PolicyRemark.push(this.TrueList[i].Remark)
                this.PolicyTrue.push(this.TrueList[i].IsTrue)
            }
            if (this.RadioList[this.isTwo] != undefined) {
                this.PolicyName.push(this.RadioList[this.isTwo].InsuranceName)
                this.PolicyRemark.push(this.RadioList[this.isTwo].Remark)
                this.PolicyTrue.push(this.RadioList[this.isTwo].IsTrue)
            } else {
                Toast('请选择单选险种')
                return
            }
            for (let i = 0; i < this.CheckList.length; i++) {
                if (this.CheckList[i].isTure == 0) {
                    this.PolicyName.push(this.CheckList[i].InsuranceName)
                    this.PolicyRemark.push(this.CheckList[i].Remark)
                    this.PolicyTrue.push(this.CheckList[i].IsTrue)
                }
            }
            if (this.Img3 == '' || this.Img4 == ''|| this.Img5 == '') {
                Toast.fail('请检查照片是否上传完整！');
                return;
            }
            Toast.loading({
                mask: true,
                message: '正在提交...'
            });
            api.AddQuote({
                InsuranceID: this.$route.params.InsuranceID,
                TrueName: this.TrueName,
                IDNumber: this.IDNumber,
                PlateNumber: this.PlateNumber,
                CarBrand: this.CarBrand,
                VIN: this.VIN,
                EngineNumber: this.EngineNumber,
                RegistrationTime: this.RegistrationTime,
                InsuranceCategory: JSON.stringify({ PolicyName: this.PolicyName, PolicyRemark: this.PolicyRemark, PolicyTrue: this.PolicyTrue }),
                IsMust: this.isTurer,
                DrivingFrontPhoto: this.Img3,
                DrivingAfterPhoto: this.Img4,
                YearlyCheckPhotos: this.Img5
            }).then(res => {
                if (res.Success) {
                    // Toast('请耐心等待，正在为您报价中...')
                    // setTimeout(() => {
                    this.$router.push('/WaitFor')
                    // },1000)
                } else {
                    Toast(res.Msg)
                }
                Toast.clear();
            })
        }
    }
}
</script>
<style scoped>
input {
    border: 0;
    text-align: right;
    width: 95%
}

.tenter {
    background: #fff;
    overflow: hidden;
}

.title {
    padding: 12px 15px;
    font-size: 16px;
}

.leftbor {
    width: 4px;
    height: 18px;
    background: #2491ff;
    display: block;
    float: left;
    margin: 3px 10px 0 0;
    border-radius: 5px;
}

.choosetitle {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

.choose {
    overflow: hidden;
    margin: 8px 0;
    color: #333;
}

.choose:first-child {
    margin-top: 0
}

.choose:last-child {
    margin: 0
}

.chleft {
    font-size: 14px;
    width: 20%;
    float: left;
    margin: 2px 0;
    text-align: center;
}

.chleft span {
    color: #999999
}

.chright {
    width: 80%;
    float: left;
    font-size: 12px;
    overflow: hidden;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
}

.blocker {
    padding: 2px 5px;
    height: 35px;
    float: left;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 26%;
    text-align: center;
    margin: 5px 2px;
    display: table;
    color: #999;
    position: relative
}

.blocker span {
    vertical-align: middle;
    display: table-cell;
}

.bottom {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 51px;
    line-height: 51px;
    background: #2491ff;
    color: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.active {
    color: #2491ff;
    border-color: #2491ff
}

.triangle {
    width: 0;
    height: 0;
    border-top: 10px solid #2491ff;
    border-left: 10px solid transparent;
    position: absolute;
    top: 0;
    right: 0;
}

.photo {
    margin: 0 10px;
    padding-bottom: 15px;
}

.photo p {
    color: #333;
    font-size: 14px;
    margin: 10px 0;
}

.photo span {
    font-size: 12px;
    color: #999;
}

.photo img {
    width: 42vw;
    height: 28vw;
    border-radius: 3px;
}

.goods {
    position: absolute;
    left: 0%;
    top: 60%;
    text-align: center;
    width: 48%;
}
</style>